import { Tabs } from 'antd';
import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
import { StickyContainer, Sticky } from 'react-sticky';
import './HomeNav.css'
import axios from 'axios'
const { TabPane } = Tabs;
const renderTabBar = (props, DefaultTabBar) => (
  <Sticky bottomOffset={80}>
    {({ style }) => (
      <DefaultTabBar {...props} className='site-custom-tab-bar' style={{ ...style }} />
    )}
  </Sticky>
);
class HomeNav extends Component {
  constructor() {
    super()
    this.state = {
      homeNavList: [],
      panes: [
        {
          title: '球鞋',
          key: '2',
          api: "nice/product/selectseries"
        },
        {
          title: '美妆',
          key: '3',
          api: 'nice/product/selectbeauty'
        },
        {
          title: '服饰',
          key: '4',
          api: 'nice/product/selectbeauty'
        },
        {
          title: '潮物',
          key: '5',
          api: 'nice/product/selectbeauty'
        },
        {
          title: '背包',
          key: '6',
          api: 'nice/product/selectbeauty'
        },
      ]
    }
  }
  toDetail(item) {
    this.props.history.push('/detail', item)
  }
  onTabChange(key) {
    let url = key == 1 ? 'http://lmx.free.idcfengye.com/product/nice/product/getall' : 'http://lmx.free.idcfengye.com/product/nice/product/selectbytype'
    let params = key == 1 ? { page: 1, pagesize: 100 } : { page: 1, pagesize: 100, type: key - 2 }
    axios.get(url, { params }).then(res => {
      this.setState({
        homeNavList: res.data
      })
    })
  }
  componentDidMount() {
    this.onTabChange(1)
  }
  render() {
    return (
      <StickyContainer>
        <Tabs onChange={this.onChange}
          activeKey={this.state.activeKey}
          defaultActiveKey="1" renderTabBar={renderTabBar}
          style={{ color: '#c5c5c5', background: '#fff!important' }}
          onTabClick={(key) => { this.onTabChange(key) }}
        >
          <TabPane style={{ color: '#333', background: '#f2f2f2', padding: '0 0.14rem' }} tab="推荐" key="1">
            {
              this.state.homeNavList.length && this.state.homeNavList.map((el,i) =>
                <div key={i} onClick={() => this.toDetail(el)} style={{ height: '146px', borderRadius: '0.15rem', background: '#fff', marginTop: '0.2rem' }}>
                  {el.photos.length && <img style={{ width: '45%', float: "left" }} src={el.photos[0].path} alt='' />}
                  <dl style={{ float: 'left', width: "50%" }}>
                    <dt style={{ fontWeight: '900', fontSize: '14px', marginTop: '0.4rem' }}>
                      {el.pname}
                    </dt>
                    <dd style={{ fontSize: '12px', color: '#98989a' }}>36.5码<span style={{ float: 'right' }}>￥{el.price}</span></dd>
                    <dd style={{ fontSize: '12px', color: '#999' }}>累计成交{el.count}单 今日{el.type}单</dd>
                    <dd style={{ fontSize: '12px', color: '#ef2d35' }}><i style={{ fontStyle: 'normal', display: 'inline-block', padding: '0.05rem', background: '#fce8e9', borderRadius: '0.1rem' }}>{el.series}</i><i style={{ fontStyle: 'normal', display: 'inline-block', padding: '0.05rem', background: '#fce8e9', borderRadius: '0.1rem', marginLeft: '0.1rem' }}>{el.style}</i></dd>
                  </dl>
                </div>
              )
            }
          </TabPane>
          {this.state.panes.map((pane,i) => <TabPane key={i} style={{ minHeight: '100vh', color: '#333', background: '#f2f2f2', padding: '0 0.14rem' }} tab={pane.title} key={pane.key}>
            {
              this.state.homeNavList.length && this.state.homeNavList.map((el,i) =>
                <div key={i} onClick={() => this.toDetail(el.pid)} style={{ height: '146px', borderRadius: '0.15rem', background: '#fff', marginTop: '0.2rem' }}>
                  {el.photos.length && <img style={{ width: '45%', float: "left" }} src={el.photos[0].path} alt='' />}
                  <dl style={{ float: 'left', width: "50%" }}>
                    <dt style={{ fontWeight: '900', fontSize: '14px', marginTop: '0.4rem' }}>
                      {el.pname}
                    </dt>
                    <dd style={{ fontSize: '12px', color: '#98989a' }}>36.5码<span style={{ float: 'right' }}>￥{el.price}</span></dd>
                    <dd style={{ fontSize: '12px', color: '#999' }}>累计成交{el.count}单 今日{el.type}单</dd>
                    <dd style={{ fontSize: '12px', color: '#ef2d35' }}><i style={{ fontStyle: 'normal', display: 'inline-block', padding: '0.05rem', background: '#fce8e9', borderRadius: '0.1rem' }}>{el.series}</i><i style={{ fontStyle: 'normal', display: 'inline-block', padding: '0.05rem', background: '#fce8e9', borderRadius: '0.1rem', marginLeft: '0.1rem' }}>{el.style}</i></dd>
                  </dl>
                </div>
              )
            }
          </TabPane>)}
        </Tabs>
      </StickyContainer>
    )
  }
}
export default withRouter(HomeNav)